<script lang="ts" setup>
import { ref, onActivated } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { dialog } from '@/settings/components/dialog';
import { format, parseISO } from 'date-fns';
import { useI18n } from 'vue-i18n';

const listing = ref<Record<string, any>[]>([]);
const pager = ref({});
const loading = ref(false);
const search = ref();
const { success } = useNotification();
const { t } = useI18n();

const form = ref({
  content: '',
  time: [],
});

const refresh = async (page = 1) => {
  const { isSuccess, data } = await $fetch('/admin/atomgitPopNotice/getPage', {
    method: 'post',
    data: {
      content: form.value.content,
      startTime: form.value.time?.[0],
      endTime: form.value.time?.[1],
      pageNum: page,
      pageSize: 20,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    listing.value = data.records;

    pager.value = {
      current: page,
      total: data.total,
    };
  }
}

const remove = async (id: string) => {
  const { isSuccess } = await $fetch('/admin/atomgitPopNotice/delete', {
    method: 'post',
    data: {
      id: id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.del'));
    search.value.refresh();
  }
};

const add = async () => {
  const { button } = await dialog(() => import('./add-edit-window.vue'), {
    title: t('settings.view.notice.add'),
    props: {
      parentId: String(),
    },
  });

  if (button == 'ok') {
    search.value.refresh();
  }
}

const edit = async (id: string) => {
  const { button } = await dialog(() => import('./add-edit-window.vue'), {
    title: t('settings.view.notice.edit'),
    props: {
      id: String(id),
    },
  });

  if (button == 'ok') {
    search.value.refresh();
  }
};

const changeStatus = async (id: number, status: number) => {
  const { isSuccess } = await $fetch('/admin/atomgitPopNotice/onlineAndOffline', {
    method: 'post',
    data: {
      id: id,
      status: status,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    search.value.refresh();
  }
};

onActivated(() => {
  search.value.refresh('reset');
});
</script>

<template>
  <OpenPageSection>
    <OpenSearchTable :pager="pager" :data="listing" :loading="loading" @search="refresh" ref="search">
      <template #header>
        <AFormItem :label="t('settings.view.notice.title')">
          <AInput v-model="form.content" allow-clear />
        </AFormItem>
        <AFormItem :label="t('settings.view.notice.createTime')">
          <ARangePicker v-model="form.time" />
        </AFormItem>
      </template>
      <template #header-button>
        <AButton type="primary" @click="add()">{{ $t('settings.action.add') }}</AButton>
      </template>

      <template #columns>
        <ATableColumn :title="t('settings.view.notice.content')" data-index="content" tooltip ellipsis />
        <ATableColumn :title="t('settings.view.notice.validity')" :width="350">
          <template #cell="{ record }">
            {{ `${format(parseISO(record.startTermOfValidity), 'yyyy-MM-dd HH:mm:ss')} - ${format(parseISO(record.endTermOfValidity), 'yyyy-MM-dd HH:mm:ss')}` }}
          </template>
        </ATableColumn>
        <ATableColumn :title="t('settings.view.notice.createTime')" :width="200">
          <template #cell="{ record }">
            {{ format(parseISO(record.createTime), 'yyyy-MM-dd HH:mm:ss') }}
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.subscription.user.index.column5')" :width="240">
          <template #cell="{ record }">
            <div class="button-actions">
              <AButton status="danger" size="small" @click="changeStatus(record.id, 2)" v-confirm v-if="record.status === 1">{{ $t('settings.action.downline') }}</AButton>
              <AButton type="primary" size="small" @click="changeStatus(record.id, 1)" v-confirm v-if="record.status === 2">{{ $t('settings.action.publish') }}</AButton>
              <AButton size="small" @click="edit(record.id)">{{ $t('settings.action.edit') }}</AButton>
              <AButton type="primary" status="danger" size="small" @click="remove(record.id)" v-confirm>{{ $t('settings.action.delete') }}</AButton>
            </div>
          </template>
        </ATableColumn>
      </template>

    </OpenSearchTable>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
